<template>
    <div class="container">
        <!-- 搜索框和筛选条件 -->
        <el-form :model="searchForm" class="search-form" @submit.native.prevent="fetchData">
            <div class="search-container">
                <el-select v-model="selectedFilter" placeholder="筛选条件" size="small" class="filter-dropdown"
                    @change="toggleFilter">
                    <el-option label="商品筛选" value="goods"></el-option>
                    <el-option label="食物筛选" value="foods"></el-option>
                </el-select>
                <el-input v-model="searchForm.name" placeholder="请输入搜索内容" size="small" class="search-input"></el-input>
            </div>

            <!-- 筛选条件内容 -->
            <div class="filter-content" v-if="selectedFilter === 'goods'">
                <el-form-item label="商品销量范围" class="form-item">
                    <el-input v-model="searchForm.goodsMinSale" placeholder="最小销量" size="small"
                        class="input-text"></el-input>
                    <span class="range-separator">至</span>
                    <el-input v-model="searchForm.goodsMaxSale" placeholder="最大销量" size="small"
                        class="input-text"></el-input>
                </el-form-item>
            </div>
            <div class="filter-content" v-if="selectedFilter === 'foods'">
                <el-form-item label="食物销量范围" class="form-item">
                    <el-input v-model="searchForm.foodsMinSale" placeholder="最小销量" size="small"
                        class="input-text"></el-input>
                    <span class="range-separator">至</span>
                    <el-input v-model="searchForm.foodsMaxSale" placeholder="最大销量" size="small"
                        class="input-text"></el-input>
                </el-form-item>
                <el-form-item label="食物价格范围" class="form-item">
                    <el-input v-model="searchForm.foodsMinPrice" placeholder="最低价格" size="small"
                        class="input-text"></el-input>
                    <span class="range-separator">至</span>
                    <el-input v-model="searchForm.foodsMaxPrice" placeholder="最高价格" size="small"
                        class="input-text"></el-input>
                </el-form-item>
            </div>
            <el-button type="primary" @click="fetchData" size="small" class="search-button">搜索</el-button>
        </el-form>

        <!-- 切换表格显示 -->
        <div class="table-toggle">
            <el-button :type="currentTable === 'goods' ? 'primary' : 'default'" size="small"
                @click="currentTable = 'goods'">商品表格</el-button>
            <el-button :type="currentTable === 'foods' ? 'primary' : 'default'" size="small"
                @click="currentTable = 'foods'">食物表格</el-button>
        </div>

        <!-- 商品和分类的合并表格 -->
        <div v-if="currentTable === 'goods'" class="table-wrapper">
            <h3 class="section-title">商品与分类数据</h3>
            <el-table :data="goodsWithCategoriesData" border style="width: 100%" class="data-table" size="small">
                <el-table-column prop="id" label="商品ID" width="80"></el-table-column>
                <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
                <el-table-column prop="sale" label="销量" width="100"></el-table-column>
                <el-table-column prop="category_title" label="分类名称" width="200"></el-table-column>
            </el-table>
            <!-- 商品和分类分页 -->
            <el-pagination @size-change="handleGoodsWithCategoriesPageSizeChange"
                @current-change="handleGoodsWithCategoriesPageChange" :current-page="pagination.goodsWithCategoriesPage"
                :page-size="pagination.goodsWithCategoriesPageSize" :total="pagination.goodsWithCategoriesTotal"
                layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" class="pagination"></el-pagination>
        </div>

        <!-- 食物表格 -->
        <div v-if="currentTable === 'foods'" class="table-wrapper">
            <h3 class="section-title">食物数据</h3>
            <el-table :data="foodsData" border style="width: 100%" class="data-table" size="small">
                <el-table-column prop="id" label="食物ID" width="80"></el-table-column>
                <el-table-column prop="name" label="食物名称" width="200"></el-table-column>
                <el-table-column prop="price" label="价格" width="100"></el-table-column>
                <el-table-column prop="sale" label="销量" width="100"></el-table-column>
            </el-table>
            <!-- 食物分页 -->
            <el-pagination @size-change="handleFoodsPageSizeChange" @current-change="handleFoodsPageChange"
                :current-page="pagination.foodsPage" :page-size="pagination.foodsPageSize"
                :total="pagination.foodsTotal" layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]"
                class="pagination"></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import http from "../http";

// 搜索表单
const searchForm = reactive({
    name: "", // 搜索名称
    goodsMinSale: null, // 商品最小销量
    goodsMaxSale: null, // 商品最大销量
    foodsMinSale: null, // 食物最小销量
    foodsMaxSale: null, // 食物最大销量
    foodsMinPrice: null, // 食物最低价格
    foodsMaxPrice: null, // 食物最高价格
});

// 查询结果数据
const goodsWithCategoriesData = ref([]); // 商品和分类数据
const foodsData = ref([]); // 食物数据

// 分页信息
const pagination = reactive({
    goodsWithCategoriesPage: 1,
    goodsWithCategoriesPageSize: 10,
    goodsWithCategoriesTotal: 0,
    foodsPage: 1,
    foodsPageSize: 10,
    foodsTotal: 0,
});

// 当前显示的筛选条件和表格
const selectedFilter = ref("goods");
const currentTable = ref("goods");

const toggleFilter = (value) => {
    // 清空对应筛选条件
    if (value === "goods") {
        searchForm.foodsMinSale = null;
        searchForm.foodsMaxSale = null;
        searchForm.foodsMinPrice = null;
        searchForm.foodsMaxPrice = null;
    } else if (value === "foods") {
        searchForm.goodsMinSale = null;
        searchForm.goodsMaxSale = null;
    }
};

// 获取数据
const fetchData = async () => {
    try {
        const response = await http.get("app/search/", {
            params: {
                name: searchForm.name,
                goods_min_sale: searchForm.goodsMinSale,
                goods_max_sale: searchForm.goodsMaxSale,
                foods_min_sale: searchForm.foodsMinSale,
                foods_max_sale: searchForm.foodsMaxSale,
                foods_min_price: searchForm.foodsMinPrice,
                foods_max_price: searchForm.foodsMaxPrice,
                goods_with_categories_page: pagination.goodsWithCategoriesPage,
                goods_with_categories_page_size: pagination.goodsWithCategoriesPageSize,
                foods_page: pagination.foodsPage,
                foods_page_size: pagination.foodsPageSize,
            },
        });

        const { data, total } = response.data;

        // 更新数据
        goodsWithCategoriesData.value = data.goods_with_categories || [];
        foodsData.value = data.foods || [];

        // 更新分页总数
        pagination.goodsWithCategoriesTotal = total.goods_with_categories || 0;
        pagination.foodsTotal = total.foods || 0;
    } catch (error) {
        ElMessage.error("查询失败：" + error.message);
    }
};

// 商品和分类分页操作
const handleGoodsWithCategoriesPageChange = (page) => {
    pagination.goodsWithCategoriesPage = page;
    fetchData();
};
const handleGoodsWithCategoriesPageSizeChange = (size) => {
    pagination.goodsWithCategoriesPageSize = size;
    fetchData();
};

// 食物分页操作
const handleFoodsPageChange = (page) => {
    pagination.foodsPage = page;
    fetchData();
};
const handleFoodsPageSizeChange = (size) => {
    pagination.foodsPageSize = size;
    fetchData();
};

// 初次加载数据
fetchData();
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    padding: 15px;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    width: 350px;
    height: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.search-form {
    width: 100%;
    margin-bottom: 15px;
}

.search-container {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}

.filter-dropdown {
    margin-right: 10px;
    width: 110px;
}

.search-input {
    flex: 1;
}

.filter-content {
    width: 100%;
    margin-bottom: 15px;
}

.input-text {
    width: 100%;
}

.range-separator {
    margin: 0 8px;
    font-size: 14px;
    color: #666;
}

.search-button {
    width: 100%;
    height: 36px;
    font-size: 14px;
}

.table-toggle {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

.data-table {
    width: 100%;
    margin-bottom: 15px;
}

.table-wrapper {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

.pagination {
    margin-top: 10px;
    text-align: center;
}
</style>
